<html version="-//W3C//DTD HTML 4.01//EN">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    
    <title>BB Počítadlo - Layout</title>
    
    <style type="text/css">
    
      #box{
        width: 280px;
        height: 400px;
        border: solid #aaa 1px;
        
        font-family:arial,sans-serif;
      }
    
      /* --- */
    
      #items{
        font-size: 90%;
        background-color: #fff;
        color: #555;
        line-height: 100%;
      }
      
      div.item{
        margin: 0;
        padding: 6px 4px 4px 4px;
        background: url(bg.png) repeat-x top;
      }
      
      div.line, div.head{
        position: relative;
      }
      
      div.head strong{
        font-size: 90%;
        padding-left: 18px; 
      }
      
      div.head span.icon{
        position: absolute;
        top: 2px;
        left: 2px;
        display: block;
        width: 10px;
        height: 10px;
        overflow: hidden;
        background: url('m.png') no-repeat 0 0;  
      }
      
      div.head strong, span.icon{
        cursor: pointer;
      }   
      
      div.line var, div.head var{
        position: absolute;
        top: 0;
        right: 0;
        padding: 0 4px;
        font-size: 90%;
        color: #000;
        font-family: Verdana;
        font-style: normal;
      }
      
      div.item div.info{
        padding: 3px 0 3px 25px;
        font-size: 90%;
      }
      
      div.item.close div.info{
        display: none;
      }
      
      div.item.open div.info{
        display: block;
      }
      
      div.item.close span.icon{
        background-position: 0 0;
      }
      
      div.item.open span.icon{
        background-position: -10 0;
      }
      
      
      div.info div.line{
        background: url(dot.png) repeat-x bottom;
      } 
      
      div.line em{
        font-style: normal;
        padding-right: 5px;
        background-color: #fff;
      }
      
      div.info var{
        background-color: #fff;
        font-size: 85%;
      }
      
      div.item.black strong {}
      
      div.item.red strong { color: red; }
      
      div.item.green strong { color: green; }
      
      div.item.blue strong { color: blue; }
      
      div.item.orange strong { color: orange; }
      
      div.item.yellow strong { color: yellow; }
    
    </style>
    
    <script type="text/javascript">
    
      onload = function()
      {
      
        function $(id){return document.getElementById(id);}
        $.a = function(to, what){to.appendChild(what); return to;}
        $.c = function(name, className, content)
        { 
          var el = document.createElement(name);
          
          if(className)
            el.className = className;
          
          if(content)
            if(typeof content == "string")
              el.innerHTML = content;
            else
              $.a(el, content);
              
          return el;
        }
        
      
        var items = $("items");
      
        function mkSubItem(title, data)
        {
          return "<div class='line'><em>" + title + "</em><var><span title='Views'>" + data.views + "</span> / <span title='Previews'>" + data.previews + "</span></var></div>";
        }
      
        function mkItem( open, data )
        {
          var itemClass = "item " + data.style;
        
          var item = $.c("div", itemClass + " " + (open?'open':'close'));
          var head = $.c("div", "head");
          var icon = $.c("span", "icon", "&nbsp;");
          var title = $.c("strong", null, data.name);
          
          var total = $.c("var", null, "" + data.total);
          total.title = "Celková návštěvnost";
          
          $.a(head, icon);
          $.a(head, title);          
          $.a(head, total);
          
          $.a(item, head)
          var info = $.c("div", "info", mkSubItem("dnes", data.today) + 
                                        mkSubItem("včera", data.yesterday) +
                                        mkSubItem("tento měsíc", data.month));
          $.a(item, info);
          
          title.onclick = icon.onclick = function()
          {
            open = !open;
            item.className = itemClass + " " + (open?"open":"close");
          };
          
          return item;
        }
        
        
      
        var data = {
          name: "Lorem Ipsum",
          style: "green",
          total: 12345,
          today: {views: 123, previews: 234},
          yesterday: {views: 234, previews: 634},
          month: {views: 1223, previews: 8034}
        }
      
        $.a(items, mkItem( true, data ));
        $.a(items, mkItem( true, data ));
        $.a(items, mkItem( true, data ));
      
      
      
      }
    
    
    
    
    </script>
    
  </head>
  <body>
    
    <div id="box">
      
      <div id="items">
      
        <div class="item open red">
          <div class="head"><span class="icon">&nbsp;</span><strong>JSLab.net</strong><var title="Celková návštěvnost">1200</var></div>
          <div class="info">
            <div class="line"><em>dnes</em> <var><span title="Views">34</span> / <span title="Previews">128</span></var></div>
            <div class="line"><em>včera</em> <var><span title="Views">56</span> / <span title="Previews">226</span></var></div>
            <div class="line"><em>tento měsíc</em> <var><span title="Views">876</span> / <span title="Previews">1286</span></var></div>
          </div>
        </div>
        
        <div class="item close">
          <div class="head"><span class="icon">&nbsp;</span><strong>notepad.JSLab.net</strong><var>23245</var></div>
          <div class="info">
            <div class="line"><em>dnes</em> <var><span title="Views">342</span> / <span title="Previews">1228</span></var></div>
            <div class="line"><em>včera</em> <var><span title="Views">34</span> / <span title="Previews">128</span></var></div>
            <div class="line"><em>tento měsíc</em> <var><span title="Views">34</span> / <span title="Previews">128</span></var></div>
          </div>
        </div>
      
      </div>
    
    </div>
    
  </body>
</html>
